<template>
  <div>
    <div class="header">
        <div class="header_top">
        <img src="../../assets/images/返回.png" @click="fanhui" alt="" />
        <div style="color:#fff">客户详情</div>
        <img src="../../assets/images/fanhuishouye.png" alt="" />
      </div>
      <div class="header-line">
          <div class="touxiang">
              <img src="../../assets/images/头像.png" width="60" height="60" alt="">
          </div>
        <div style="color:#fff">{{data.custName}}</div>
        <div class="r-line" @click="btn(data.id)">
           编辑信息
        </div>
      </div>
    </div>
    <div class="box">
      <div class="list">
          <img src="../../assets/images/基本信息.png" height="30" width="30" alt="">
          <div>基本信息</div>
      </div>
      <p>
          <span>客户名称</span> {{data.custName}}
      </p>
       <p>
          <span>联系电话</span> {{data.telephone}}
      </p>
      <p>
          <span>学历</span> {{data.education}}
      </p>
      <p>
          <span>性别</span> {{data.sex}}
      </p>
      <p>
          <span>年龄</span> {{data.age}}
      </p>
      <p>
          <span>所属城市</span> {{data.cityName}}
      </p>
      <p>
          <span>公司名称</span> {{data.company}}
      </p>
      <p>
          <span>职位</span> {{data.position}}
      </p>
      <p>
          <span>录入时间</span> {{data.createTime}}
      </p>
    </div>
  </div>
</template>

<script>
import {custXQId} from '../../request/api'
export default {
  data() {
    return {
        data:[]
    };
  },
  created(){
      let id = this.$route.params.id
      custXQId(id).then(res=>{
          if(res.errCode==0){
              let {data} = res
              this.data=data
              console.log(this.data);
          }
      })
  },
  methods:{
      fanhui(){
          this.$router.back()
      },
      btn(id){
          this.$router.push('/custXG/'+id)
      }
  }
};
</script>
 
<style lang = "less" scoped>
* {
  padding: 0;
  margin: 0;
}
.header {
  height: 200px;
  width: 100%;
  background: #1f3484;
    .header_top {
    padding: 31px 12px 15px;
    height: 22px;
    display: flex;
    justify-content: space-between;
    img {
      height: 100%;
    }
  }

  .header-line{
      display: flex;
      align-items: center;
      height: 60px;
      position: relative;
    .touxiang{
        margin-left: 40px;
        margin-right: 15px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
       box-shadow: 0 0 4px 6px rgba(255, 255, 255, 0.5);
    }
    .r-line{
        width: 80px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      background: skyblue;
      opacity:.4 ;
      color: #fff;
      position: absolute;
      top: 15px;
      right: 0;
      border-radius: 6px 0 0 6px;
    }
  }
}
.box {
  width: 345px;
  background: #fff;
  margin: -30px auto 0;
  border-radius: 6px;
  position: relative;
  padding: 20px;
  box-sizing: border-box;
    .list{
        display: flex;
        align-items: center;
        border-bottom: 1px dashed #999;
        padding-bottom: 10px;
        img{
            margin-right: 20px;
        }
    }
    p{
        padding: 10px 0;
    display: flex;
        span{
            display: block;
            width: 64px;
            color:#999;
            text-align: right;
            margin-right: 15px;
        }
    }
  }

</style>